<template>
  <PublicPage bgColor="#F5F5F5">
    <view class="grid grid-cols-2 p-3 bg-white gap-x-4">
      <view
        class="flex items-center justify-center h-16 text-center rounded-xl"
        style="background: linear-gradient(118.24deg, #f1fffd 0%,#cdfff5 100%,#b9fff1 100%);"
        @click="goAddexpert"
      >
        <image
          src="@/static/image/icon/icon_addUser.png"
          class="w-10 h-auto"
          mode="widthFix" />
        <text class="pl-1">注册医生</text>
      </view>
      <view
        class="flex items-center justify-center h-16 text-center rounded-xl"
        style="background: linear-gradient(136.57deg,#fffcf5 -10.49%,#ffeed5 97.12%);"
        @click="goAuditexpert" 
      >
        <image 
          src="@/static/image/icon/icon_audit.png"
          class="h-auto w-11"
          mode="widthFix" />
        <text class="pl-1">资质审核进度</text>
      </view>
    </view>

    <view class="bg-white p-3 borderBottom sticky top-0 z-[99]">
      <u-search
        v-model="searchData.keyword"
        shape="square"
        height="80rpx"
        placeholder="医生姓名 / 电话 / 诊所名称"
        :animation="true"
        @search="search"
        @custom="search"
        @clear="search"
        ></u-search>
    </view>

    <view class="bg-white">
      <view v-for="(item,index) in dataList" :key="item.id" class="mx-3" :class="{'borderBottom': (index+1) !== dataList.length}" @click="goDetail(item)">
        <UserCard  
          :avatar="item.headimg" 
          :userName="item.userName" 
          :deptName="item.deptname" 
          :postName="item.postName" 
          :com="item.com">
          <template #content>
            <view v-if="item.createTime" class="pt-1 u-tips-color fz-12">{{ item.createTime }} 注册</view>
          </template>
          <template #status>
            <!-- 0未认证 1成功 2已申请 3失败 -->
            <u-tag v-if="item.apStatus === ExpertApStatusEnum.SUCCEED" text="已认证" type="primary" size="mini" plain plainFill icon="checkmark-circle-fill" />
            <u-tag v-else-if="item.apStatus === ExpertApStatusEnum.ERROR" text="认证失败" type="error" size="mini" plain plainFill />
            <u-tag v-else text="认证中" type="success" size="mini" plain plainFill />
          </template>
        </UserCard>
      </view>
    </view>
    <Empty v-if="loadStatus === 'nomore' && dataList.length === 0" :type="1" />
    <LoadMore  v-else :status="loadStatus" />
  </PublicPage>
</template>

<script setup lang="ts">
import UserCard from "@/components/userCard.vue";
import { expertList } from '@/api/expert';
import { usePageList } from "@/hooks/usePageList";
import { ExpertItemTypes } from '@/types/expert';
import { ExpertApStatusEnum } from '@/utils/enums';
import Empty from "@/components/empty.vue";
import LoadMore from "@/components/loadMore.vue";
import { refreshOnLoad } from "@/hooks/refreshPage";
import { log } from "console";

// 查询列表参数
const searchData = reactive({
  keyword: '',
  comId: ''
})

// 获取列表
const { getList, search, list: dataList, status: loadStatus } = usePageList<ExpertItemTypes>((params) =>
  expertList({ ...params, ...searchData })
);

// 注册医生
const goAddexpert = () => {
  uni.$u.route({
    type: 'navigateTo',
    url: '/pages/expert/editExport'
  })
};

// 资质审核进度
const goAuditexpert = () => {
  uni.$u.route({
    type: 'navigateTo',
    url: '/pages/expert/auditExpert'
  })
};

// 跳转详情
const goDetail = (item: ExpertItemTypes) => {
  uni.setStorageSync('clickInfo', JSON.stringify(item))
  uni.$u.route({
    type: 'navigateTo',
    url: '/pages/expert/expertDetail',
    params: {
      id: item.id
    }
  })
}


onLoad(() => {
  getList();
});
onShow(() => {
  refreshOnLoad(() => { search() });
});
// 下拉刷新
onPullDownRefresh(async () => {
  try {
    await search()
    setTimeout(() => {
      uni.stopPullDownRefresh()
    }, 1000)
  } catch (error) {
    uni.stopPullDownRefresh()
  }
});
// 加载更多
onReachBottom(()=>{
  getList();
});
</script>

<style lang="scss" scoped></style>
